<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>搜索界面</title>
    <link rel="stylesheet" href="./header.css">
    <style>
        body {
            position: relative;
        }

        #search_div {
            position: absolute;
            top: 80px;
            left: 3%;
            min-width: 250px;
            min-height: 500px;
            width: 94%;
            margin: 0px auto;
            background-color: aliceblue;
            border-radius: 50px;
            z-index: -1;
        }

        #search_div table {
            margin: 5px auto;
        }

        #search_div input,
        #search_div button {
            font-size: 7mm;
            border-radius: 20px;
        }
        /* 给页数选择器设置样式 */
        .number_select{
            width: 65px;
            position: relative;
            left: 50px;
            text-align: center;
        }
        /* 给上下页按钮设置样式 */
        .number_select_lt_gt{
            position: relative;
            left: 50px;
            width: 40px;
        }

        .search_unit {
            border: 2px black solid;
            position: relative;
            border-radius: 25px;
            width: 250px;
            height: 300px;
            float: left;
            margin: 10px;
        }

        .search_unit img {
            position: relative;
            top: 15px;
            left: 15px;
            width: 220px;
            width: 220px;
            cursor: pointer;
        }

        .search_unit_name {
            position: absolute;
            top: 240px;
            left: 20px;

        }

        .search_unit_prices {
            position: absolute;
            top: 265px;
            left: 20px;
        }

        .search_unit_name_toolong {
            position: relative;
            background-color: black;
            color: white;
            display: none;
            z-index: 20;
        }

        .search_unit_name:hover {
            cursor: pointer;
        }

        .search_unit_name:hover .search_unit_name_toolong {
            display: block;
        }

        .line_limit {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            max-width: 190px;
        }
    </style>
</head>

<body>
    <script src="./header_html.js"></script>
    <div id="search_div">
        <table>
            <tr>
                <td>
                    <input type="text" id="search_div_search_input" v-model="key">
                </td>
                <td>
                    <button @click="toSearch()">搜索</button>
                </td>
                <td>
                    <button class='number_select_lt_gt' @click="change_pag(current_pag-1)">&lt;</button>
                    <input class="number_select" type="number" max="deals_total" v-model="current_pag">
                    <button class='number_select_lt_gt' @click="change_pag(current_pag+1)">&gt;</button>
                </td>
            </tr>
        </table>
        <div class="search_unit" v-for="(item, index) in search_result" :key="index">
            <img :src="item.img" alt="照片不见了，这不是网站的" @click="toGoodsDetails(item.id)">
            <div class="search_unit_name" @click="toGoodsDetails(item.id)">
                <div class="line_limit">{{item.name}}</div>
                <div class="search_unit_name_toolong">{{item.name}}</div>
            </div>
            <span class="search_unit_prices" @click="toGoodsDetails(item.id)"></span>

        </div>

    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <script src="./header_js.js"></script>
    <script>

        let search = new Vue({
            el: "#search_div",
            data: {
                search_result: [
                    {
                        id:001,
                        name: "铁三角 ANC300TW 真无线蓝牙主动降噪入耳式运动耳机 HIFI音质 轻巧机身 长久续航 黑色",
                        img: "https://img10.360buyimg.com/seckillcms/s280x280_jfs/t1/172542/26/12398/68301/60b5d648E685d877b/56c850361777239b.jpg.webp",
                        prices: 16.222,
                        url: "gudazi"
                    },
                    {
                        id:002,
                        name: "索尼（SONY）Xperia1 II 5G智能手机 4K屏 骁龙865 12G+256G 微单技术 蔡司镀膜 拍照游戏 20帧/秒 夜砚黑",
                        img: "https://img10.360buyimg.com/seckillcms/s500x500_jfs/t1/190213/11/5798/36193/60b478bdE92157961/b5d197e9b1060de9.jpg",
                        prices: 6499,
                        url: "dadazi"
                    },
                    {
                        id:003,
                        name: "沧沐布伊 UV三折雨伞黑胶雨 防晒伞遮阳全自动雨伞晴雨两用防紫外线遮阳伞 墨绿",
                        img: "https://img11.360buyimg.com/seckillcms/s500x500_jfs/t1/165103/13/7139/134027/6031fcb4E365f1924/398a7aef3e502582.jpg",
                        prices: 19.9,
                        url: "yusan"
                    },
                    {
                        id:004,
                        name: "蒲江馆 芒果水果生鲜 海南贵妃芒5斤装精品大果 新鲜水果美味到家",
                        img: "https://img12.360buyimg.com/seckillcms/s500x500_jfs/t1/173550/39/15104/198264/60cb0444E102424ea/fad6d8e71ee19881.jpg",
                        prices: 18.8,
                        url: "芒果"
                    },
                    {
                        id:005,
                        name: "小米 红米Note10Pro 5G手机 Redmi新品note10 星纱 8GB+128GB",
                        img: "https://img13.360buyimg.com/seckillcms/s500x500_jfs/t1/181029/11/9967/107648/60cc7659E3e73f73b/c44d7714e93fdd60.png",
                        prices: 1796,
                        url: "xiaomi"

                    }

                ],
                // 页面总数
                deals_total:10,
                // 当前页面序号
                current_pag:1,
                // 搜索关键字
                key:""
            },
            methods: {
                initSearch() {
                    let url = decodeURI(window.location)
                    console.log(url);
                    
                    let params = url.split("?")
                    if(params.length>1){
                        params = params[1].split("&")
                        let kind = ""
                        let key = "";
                        for (let i = 0; i < params.length; i++) {
                            let cs = params[i].split("=")
                            if (cs[0].indexOf("key")) key = cs[1]
                            else kind = cs[i]
                        }
                        console.log("kind="+kind+", key="+key);
                    }
                },
                toGoodsDetails(id){
                    if(id>0) window.location="goods_details.html?id="+id;
                },
                // 改变页数
                change_pag(val){
                    if(val<=0){
                        this.current_pag=1
                    }else if(val<=this.deals_total){
                        this.current_pag=val
                    }
                },
                // 搜索方法
                toSearch(){
                    if(this.key.length>0){
                        // axios往后台发送数据
                        console.log("搜索："+this.key);
                    }
                }
            }
        })
        search.initSearch()
        console.log("测试");
    </script>
</body>

</html>